import { updateArea } from '@/services/api/api-datahub-area';
import { updateKeyword } from '@/services/api/api-datahub-keyword';
import { CloseOutlined, PlusOutlined, SnippetsOutlined } from '@ant-design/icons';
import { FormListActionType, ProFormList, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import ProForm, { DrawerForm } from '@ant-design/pro-form';
import { Button, Form, Input, Select, Space, message } from 'antd';
import React, { useRef } from 'react';

interface EditAreaProps {
  data: DatahubAreaData.AreaPage;
  onRefurbish: () => void;
}
const EditArea: React.FC<EditAreaProps> = ({ onRefurbish, data }) => {
  const actionRef = useRef<
    FormListActionType<{
      name: string;
    }>
  >();
  return (
    <DrawerForm
      title="编辑"
      drawerProps={{
        destroyOnClose: true,
        width: '100%',
      }}
      trigger={<a>编辑</a>}
      onFinish={async (values) => {
        const response = await updateArea({
          id: data.id,
          nickNames: values.nickNames.map(item => item.name),
        });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
        }
        return true;
      }}
    >

      <ProFormList
        actionRef={actionRef}
        name='nickNames'
        initialValue={data.nickNames.map((item) => ({
          name: item
        }))}
        copyIconProps={false}
      >
        <ProFormText key="useMode" name="name" label="昵称" />
      </ProFormList>
    </DrawerForm>
  );
};
export default EditArea;
